<template>
  <div id="app-footer">
    <nav v-if=" name=='惊喜'" class="mui-bar mui-bar-tab">
      <router-link to="/GroupBuying" class="mui-tab-item">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </router-link>
      <router-link to="/Home" class="mui-tab-item">
        <span class="mui-icon mui-icon-extra mui-icon-extra-class"></span>
        <span class="mui-tab-label">找东西</span>
      </router-link>
      <router-link to="/My" class="mui-tab-item">
        <span class="mui-icon mui-icon-person-filled"></span>
        <span class="mui-tab-label">我的</span>
      </router-link>
    </nav>
    <nav v-else class="mui-bar mui-bar-tab">
      <router-link to="/Home" class="mui-tab-item">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </router-link>
      <router-link to="/Classify" class="mui-tab-item">
        <span class="mui-icon mui-icon-extra mui-icon-extra-class"></span>
        <span class="mui-tab-label">分类</span>
      </router-link>
      <router-link to="/GroupBuying" class="mui-tab-item">
        <span class="mui-icon mui-icon-extra mui-icon-extra-gift"></span>
        <span class="mui-tab-label">拼购</span>
      </router-link>
      <router-link to="/ShopCar" class="mui-tab-item">
        <span class="mui-icon mui-icon-extra mui-icon-extra-cart"></span>
        <span class="mui-tab-label">购物车</span>
      </router-link>
      <router-link to="/My" class="mui-tab-item">
        <span class="mui-icon mui-icon-person-filled"></span>
        <span class="mui-tab-label">我的</span>
      </router-link>
    </nav>
  </div>
</template>

<script>
export default {
  name: 'app-footer',
  props: ['name']
}
</script>

<style scoped lang="less">
#app-footer {
  position: relative;
  z-index: 999;
}
.mui-bar {
  height: 120px;
  .mui-tab-item {
    text-align: center;
    .mui-icon {
      width: 45px; /*px*/
      font-size: 45px; /*px*/
    }
    .mui-tab-label {
      font-size: 24px; /*px*/
      padding: 20px 0;
    }
    .mui-badge {
      font-size: 24px;
    }
  }
}
.my-active {
  color: rgba(255, 0, 0, 0.9);
}
</style>
